import React from "react";
import AddStaffMenu from "../../components/AddStaffMenu";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";
import StaffItem from "../../components/StaffItem";
import {Constant} from "../../utils/BaseConstant";
import {Color} from "../../utils/baseColor";
import cookie from "react-cookie";
import ShopName from "../../components/ShopName";
class managementStaff extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            shopNo: "0",
            isLoading: true,
            isNoStaff: true,
            isSingleShop: true,
            shopInfoList: [],
            shopStaffList: [],
            isShowAddStaffMenu: false,
            isFirst: true
        }
    }

    componentWillMount() {
        document.title = "管理员工";
        document.body.style.background = Color.BACKGROUND_DEFAULT;
    }

    componentDidMount() {
        const query = this.props.location.query;
        let shopNo = query.shopNo;
        if (shopNo) {
            this.setState({
                shopNo: shopNo
            })
        }
        this.getStaffList(shopNo ? shopNo : "");
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.StaffList.errorCode === 0) {
            this.setState({
                isLoading: false
            });
            let staffList = nextProps.StaffList;
            let shopInfoList = staffList.data.shopInfoForStaffVos;
            let shopStaffs = staffList.data.shopStaffs;
            let shopStaffList = [];
            let shopStaff = {};
            let selectShopIndex = 0;
            for (let j = 0; j < shopInfoList.length; j++) {
                let selectShop = shopInfoList[j];
                if (selectShop.shopNo == this.state.shopNo) {
                    selectShopIndex = j;
                    break;
                }
            }

            if (selectShopIndex != 0 && this.state.isFirst) {
                let shopInfo1 = shopInfoList[0];
                shopInfoList[0] = shopInfoList[selectShopIndex];
                shopInfoList[selectShopIndex] = shopInfo1;
            }
            this.setState({
                isFirst: false
            });
            for (var i = 0; i < shopStaffs.length; i++) {
                shopStaff = shopStaffs[i];
                let {staffVos} = shopStaff;
                if (staffVos.length > 0) {
                    shopStaffList.push(shopStaff)
                }
            }
            let shopCount = shopInfoList.length;
            let staffCount = shopStaffList.length;
            this.setState({
                isSingleShop: shopCount == 1,
                isNoStaff: staffCount == 0,
                isShowAddStaffMenu: staffCount > 0
            });
            if (shopCount > 1 && staffCount == 0) {
                shopStaff.shopNo = this.state.shopNo == 0 ?
                    shopInfoList[0].shopNo : this.state.shopNo;
                shopStaffList.push(shopStaff);
            }
            this.setState({
                shopInfoList: shopInfoList,
                shopStaffList: shopStaffList
            });
        }
    }


    render() {
        if (this.state.isLoading) {
            return (
                <div className="loading"><span>Loading</span></div>
            );
        } else if (this.state.isNoStaff && this.state.isSingleShop) {
            let disabled = "", unclikeable = "";
            let userRight = cookie.load("userRight");
            if (cookie.load("userRight") != 1) {
                disabled = "disabled";
                unclikeable = "unclikeable";
            }
            return (
                <div className="management-staff-container">
                    <div className="management-staff-header">
                        <div className="management-staff-header-img"></div>
                        <div>员工在哪里</div>
                    </div>
                    <div className="management-staff-button-group">
                        <button
                            onClick={this._addStaff.bind(this, Constant.CASHIER)}>+收银员
                        </button>
                        <div className="management-staff-space"></div>
                        <button
                            onClick={this._addStaff.bind(this, Constant.ACCOUNTANT)}>+财务
                        </button>
                        <div className="management-staff-space"></div>
                        <button className={unclikeable}
                                onClick={this._addStaff.bind(this, Constant.ADMIN)}
                                disabled={disabled}
                        >
                            +管理员
                        </button>
                    </div>
                    <div className="management-staff-bottom">
                        <div>
                            <div className="management-staff-bottom-img"></div>
                        </div>
                        <div>
                            <div>收银员权限：</div>
                            <div>1.店铺收款二维码 2.查看每天交易额，交易流水记录 3.通知提示每笔收款到账</div>
                            <div>管理员权限：</div>
                            <div>1.管理员工 2.店铺收款二维码 3.查看、导出交易流水记录 4.通知提示每笔收款到账</div>
                            <div>财务权限：</div>
                            <div>1.查询交易清单 2.导出交易清单</div>
                        </div>
                    </div>
                </div>
            );
        } else {
            let shopNo = this.state.shopNo == 0 ?
                this.state.shopInfoList[0].shopNo : this.state.shopNo;
            return (
                <div>
                    <ShopName shopNames={this.state.shopInfoList}
                              shopNo={this.state.shopNo}
                              fetchDataByShopId={this.fetchDataByShopId.bind(this)}
                    />
                    <ul className="marginBottom100">
                        {
                            this.state.shopStaffList.map((item, index) => {

                                return (
                                    <StaffItem key={index} item={item} shopNo={shopNo}/>
                                )
                            })
                        }
                    </ul>
                    <AddStaffMenu item={shopNo} isShow={this.state.isShowAddStaffMenu}></AddStaffMenu>
                </div>
            );

        }
    }

    fetchDataByShopId(shopNo) {
        this.setState({
            shopNo: shopNo
        });
        this.getStaffList(shopNo)
    }

    getStaffList(shopNo) {
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("getStaffList"));
        this.props.dispatch(fetchPosts("getStaffList", header, {
            "openId": cookie.load("openId"),
            "shopNo": shopNo
        }))
    }

    _addStaff(type) {
        let shopNo = this.state.shopNo == 0 ?
            this.state.shopInfoList[0].shopNo : this.state.shopNo;
        window.location.href = "/#/pay/addEmployee?staffType=" + type + "&shopNo=" + shopNo;
    }
}

function

mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: StaffList
    } = postsByApi["getStaffList"] || {
        isFetching: false,
        items: {}
    };
    return {
        isFetching,
        StaffList
    }
}

export default connect(mapStateToProps)(managementStaff);